<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <script src="{{ url_for('static',filename='js/hotMatch.js')}}?{{version}}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/alert.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <style>
    .button{
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
    }

    .button:hover {
        background-color: #4CAF50;
        color: white;
    }

    .button[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    </style>
    <title>热点匹配</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<div align="center">

    <div class="btn-group btn-group-lg" role="group" aria-label="...">

{#        <div class="btn-group" role="group">#}
{#        <button type="button" class="btn btn-primary" onclick="beginEditor()">启动编辑</button>#}
{#        </div>#}

        <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary" onclick="beginRcEditor()">启动dpb_robot2热点编辑</button>
        </div>

    </div>
</div>
<br/>
<br/>
    <div class="row" align="center">
    <div class="btn-group" >
          <button id="source-button" type="button" class="btn btn-primary">全部</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#" onclick="selectSource('全部')">全部</a></li>
            <li><a href="#" onclick="selectSource('三大报')">三大报</a></li>
            <li><a href="#" onclick="selectSource('实时热点')">实时热点</a></li>
            <li><a href="#" onclick="selectSource('手动添加')">手动添加</a></li>
          </ul>
    </div>
    </div>
<div id="hot_match" style="margin:auto; width:80%">

    <h3>热点匹配结果</h3>
    <div style="margin:auto">


    <select id = "date" class="form-control" style="margin:0px 20px 0px 0px;width:auto;">
    </select>  <p id = 'loadInfo' align="center" style="font-size:22px;color:blue;">数据加载中........,请耐心等待</p>
    <br/>
    <br/>
    <div id="hotMatchDataTable" class="table table-striped table-bordered" cellspacing="0" width="80%">
    </div>
    </div>
</div>
<script>
    function beginEditor(){
        window.open("./hotMatch/editor");
    }
    function beginRcEditor(){
        window.open("./hotMatch/editorForRc");
    }

    function selectSource(type) {
        $("#source-button").text(type);
        if (type == "全部"){
            var filterResultList = resultList;
        }else{
            var filterResultList = resultList.filter(function (item) {
            return item["source"] == type;
            });
        }
        hotMatchDataTable.data(filterResultList, 'code');
    }

    var hotMatchDataTable = null;
    var resultList = null;
    var lastTradeDay = '';
    hotMatchDataTable = jQuery("#hotMatchDataTable").raytable({
    datasource: { data: [], keyfield: 'stock_code' },
    columns: [
        { field: "blockName", title: "板块名"},
        { field: "source", title: "来源"},
        { field: "is_fuzzy_match", title: "是否开启模糊匹配"},
        { field: "match_result", title: " 匹配结果"}
    ],
    pagesize: 100,
    maxPageButtons: 5,
    rowNumbers: true
});

   $("#date").change(function(){
        refreshData();
  });

  function refreshData() {
      var date = $("#date").val();
      $("#loadInfo").show();
      hotMatchDataTable.data([],'stock_code');
       $("#date").attr("disabled","true");
     $.ajax({
         url:"/hotMatchData",
         async:true,
         type:'POST',
         data:JSON.stringify({'date':date}),
         dataType:'json',
         success:function (result) {
             {#var obj = JSON.parse(result);#}
             var obj = result;
             resultList = obj.resultList;
             hotMatchDataTable.data(resultList,'stock_code');
             $("#loadInfo").hide();
             $("#date").removeAttr("disabled");
         }
     })
 }
 function loadDate(){

        $.getJSON("/json",function (data) {
            var tradeDayList=data.trade_day;
            for (var i=0;i<tradeDayList.length;i++){
                var date=tradeDayList[i];
                if (i==tradeDayList.length-1){
                    lastTradeDay = date;
                    var html_str = "<option selected='selected' value='" + date + "'>" + date + "</option>";
                }else{
                    var html_str = "<option value='" + date + "'>" + date + "</option>";
                }
                $('#date').append(html_str);
            }
            refreshData();
        })

    }
    loadDate();


</script>

</body>
</html>